<template>
  <!-- 车间负荷状态 -->
  <div class="allBox">
    <h1>车间负荷状态</h1>
    <div class="allContent">
      <div v-if="list.length > 0" id="loadStatusData" class="allWidthHeight" />
      <div v-else class="kong">暂无数据</div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  props: {},
  data() {
    return {
      myChart: null,
      list: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    infoSize() {
      this.myChart.resize()
    },

    /* 车间负荷状态 */
    async getFactoryWorkRate() {
      const res = await this.$axios.get('/board/composite/factoryWorkRate')
      if (res.data.code === 200) {
        this.list = res.data.data
        let data = {
          factoryNameList: [],
          workNumList: [],
          workNumRateList: []
        }
        res.data.data.forEach((item) => {
          data.factoryNameList.push(item.factoryName)
          data.workNumList.push(item.workNum)
          data.workNumRateList.push(item.workNumRate)
        })
        setTimeout(async () => {
          this.loadStatusDatas(data)
        }, 500)
      }
    },
    loadStatusDatas(data) {
      const option = {
        grid: {
          left: '15%', // 距离左侧的距离
          right: '10%', // 距离右侧的距离
          top: '20%', // 距离顶部的距离
          bottom: '20%' // 距离底部的距离
        },
        legend: {
          data: ['在制数量', '在制数百分比'],
          right: '20px',
          top: '10px',
          width: '100px',
          textStyle: {
            color: '#fff' // 这里设置图例的字体颜色为红色
          },
          itemWidth: 10, // 设置图例标记的图形宽度
          itemHeight: 10 // 设置图例标记的图形高度
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        xAxis: [
          {
            splitLine: { show: false },
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              // 坐标轴 轴线
              lineStyle: {
                color: '#fff',
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              color: '#fff',
              formatter: '{value}',
              interval: 0 // 代表显示所有x轴标签显示
            },
            type: 'category',
            data: data.factoryNameList
          }
        ],
        yAxis: [
          {
            splitLine: { show: false },
            axisLine: {
              show: true,
              // 坐标轴 轴线
              lineStyle: {
                color: '#fff',
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              color: '#fff'
            },
            axisTick: {
              show: false
            },
            type: 'value'
          }
        ],
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            name: '在制数量',
            type: 'bar',
            data: data.workNum
          },
          {
            name: '在制数百分比',
            type: 'line',
            data: data.workNumRateList,
            lineStyle: {
              color: '#2DCDB2' // 设置线条颜色为红色
              // width: 2 // 可选，设置线条宽度
            },
            showSymbol: false
          }
          // {
          //   name: 'Evaporation',
          //   type: 'bar',
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value
          //     }
          //   },
          //   data: [
          //     2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
          //     3.3
          //   ]
          // },
          // {
          //   name: 'Temperature',
          //   type: 'line',
          //   yAxisIndex: 1,
          //   tooltip: {
          //     valueFormatter: function (value) {
          //       return value + ' °C'
          //     }
          //   },
          //   data: [
          //     2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2
          //   ]
          // }
        ]
      }
      if (
        this.myChart != null &&
        this.myChart !== '' &&
        this.myChart !== undefined
      ) {
        this.myChart.dispose() // 销毁
      }
      this.myChart = echarts.init(document.getElementById('loadStatusData'))
      this.myChart.clear()
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.rightTwoBox {
  height: 100%;
  padding: 40px;
}
.kong {
  background-size: 50% auto;
}
</style>
